<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>masaikk | 个人主页</title>
    <style>
        body {
            background-color: #0a0a0a;
            color: #00ff00;
            font-family: 'Courier New', monospace;
            margin: 0;
            padding: 0;
            line-height: 1.6;
        }
        
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        
        header {
            border-bottom: 1px solid #00ff00;
            padding-bottom: 20px;
            margin-bottom: 20px;
        }
        
        .terminal-window {
            background-color: #111;
            border: 1px solid #00ff00;
            border-radius: 5px;
            padding: 20px;
            margin-bottom: 30px;
            box-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
        }
        
        .terminal-header {
            margin-bottom: 15px;
            color: #ccc;
        }
        
        .prompt {
            color: #00ff00;
            font-weight: bold;
        }
        
        .cursor {
            display: inline-block;
            width: 10px;
            height: 18px;
            background-color: #00ff00;
            animation: blink 1s infinite;
            vertical-align: middle;
        }
        
        @keyframes blink {
            0%, 49% { opacity: 1; }
            50%, 100% { opacity: 0; }
        }
        
        h1, h2, h3 {
            color: #00ffff;
        }
        
        a {
            color: #ff00ff;
            text-decoration: none;
            border-bottom: 1px dashed #ff00ff;
            transition: all 0.3s ease;
        }
        
        a:hover {
            color: #ffff00;
            border-bottom: 1px solid #ffff00;
        }
        
        .skills {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 20px;
        }
        
        .skill-tag {
            background-color: #111;
            border: 1px solid #00ffff;
            border-radius: 15px;
            padding: 5px 15px;
            color: #00ffff;
            font-size: 0.9em;
        }
        
        footer {
            margin-top: 50px;
            text-align: center;
            border-top: 1px solid #00ff00;
            padding-top: 20px;
            font-size: 0.9em;
            color: #888;
        }
        
        .glitch {
            position: relative;
            color: #00ffff;
            font-size: 2.5em;
            letter-spacing: 0.1em;
            animation: glitch 1s linear infinite;
        }
        
        @keyframes glitch {
            2%, 8%, 14%, 40%, 42% {
                transform: translate(2px, 0) skew(2deg);
            }
            4%, 12%, 36%, 44% {
                transform: translate(-2px, 0) skew(-2deg);
            }
            18%, 32% {
                transform: translate(0, 2px);
            }
            22%, 26% {
                transform: translate(0, -2px);
            }
            48%, 100% {
                transform: translate(0, 0);
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1 class="glitch">masaikk</h1>
            <div class="terminal-window terminal-header">
                <span class="prompt">$</span> whoami<br>
                极客 | 开发者 | 技术爱好者
            </div>
        </header>
        
        <main>
            <section class="terminal-window">
                <div class="terminal-header">> 个人简介</div>
                <p>
                    <span class="prompt">$</span> cat about.txt<br>
                    欢迎来到我的空间! 我是masaikk，热爱技术与编程。<br>
                    我相信代码可以改变世界，喜欢探索新技术和解决复杂问题。<br>
                    当我不在编码时，你可能会发现我在研究最新的技术趋势或参与开源项目。
                </p>
            </section>
            
            <section class="terminal-window">
                <div class="terminal-header">> 技能树</div>
                <p>
                    <span class="prompt">$</span> ls -la skills/<br>
                    <div class="skills">
                        <span class="skill-tag">HTML/CSS</span>
                        <span class="skill-tag">JavaScript</span>
                        <span class="skill-tag">Python</span>
                        <!-- <span class="skill-tag">Git</span> -->
                        <span class="skill-tag">React</span>
                        <span class="skill-tag">Node.js</span>
                        <span class="skill-tag">Linux</span>
                        <span class="skill-tag">数据库</span>
                        <span class="skill-tag">深度学习算法</span>

                    </div>
                </p>
            </section>
            
            <section class="terminal-window">
                <div class="terminal-header">> 联系方式</div>
                <p>
                    <span class="prompt">$</span> echo $CONTACT_INFO<br>
                    📧 邮箱: <a href="mailto:mosaicyy@163.com">mosaicyy@163.com</a><br>
                    💻 GitHub: <a href="https://github.com/masaikk" target="_blank">github.com/masaikk</a><br>
                    💻 Gitee: <a href="https://gitee.com/masaikk" target="_blank">gitee.com/masaikk</a><br>
                    🌐 个人网站: <a href="#" target="_blank">masaikk.com</a>
                </p>
            </section>
            
            <section class="terminal-window">
                <div class="terminal-header">> 项目展示</div>
                <p>
                    <span class="prompt">$</span> find ./projects -type f -name "*.awesome" | sort<br>
                    ./projects/project1.awesome - 一个基于AI的推荐系统<br>
                    ./projects/project2.awesome - 开源贡献与维护<br>
                    ./projects/project3.awesome - 全栈Web应用开发<br>
                    ./projects/project4.awesome - 数据可视化解决方案
                </p>
            </section>
        </main>
        
        <section class="terminal-window">
            <span class="prompt">$</span> echo "Hello, World!" <span class="cursor"></span>
        </section>
        
        <footer>
            <!-- <p>/* 这个站点使用纯HTML和CSS构建，没有使用任何框架 */</p> -->
            <p>© 2025 masaikk. 版权所有。</p>
        </footer>
    </div>
</body>
</html>
